<template>
	<a-config-provider
		:locale="componentDefaultConfig"
		:space="{ size: 10 }"
		:renderEmpty="renderEmpty"
		:theme="{
			token: { colorPrimary: themeColor }
		}"
	>
		<router-view v-slot="{ Component }">
			<component :is="Component" />
		</router-view>
	</a-config-provider>
</template>

<script setup lang="ts">
import { useHomeStore } from '@/store'
import { componentDefaultConfig } from '@/utils'
import { storeToRefs } from 'pinia'
import CEmpty from './components/CEmpty.vue'

const { themeColor } = storeToRefs(useHomeStore())

const renderEmpty = () => h(CEmpty)

watchEffect(() => {
	const root = document.querySelector(':root') as HTMLElement
	root.style.setProperty('--main-color', themeColor.value)
})
</script>
